<template>
  <div class="h-87" style="top:11.3%;height: 89.5%;">

    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:30%">
      <div data-bottom class="second-sides">
        <page-header text="世界奶山羊主要养殖地区数据分析">
          <!-- <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" /> -->
          <v-chart v-if="optionZFJCsjnsyyzdq_fxc.isShow" ref="zscpjzlzr" :options="optionZFJCsjnsyyzdq_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="全国奶山羊主要养殖地区数据分析">
          <!-- <v-chart v-if="optionCyrkqk.isShow" ref="nypx" :options="optionCyrkqk" /> -->
          <v-chart v-if="optionZFJCqgnsyyzdq_fxc.isShow" ref="nypx" :options="optionZFJCqgnsyyzdq_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="陕西省奶山羊主要养殖地区数据分析" :ph="300">
          <v-chart v-if="optionZFJCsxnsyyzdq_fxc.isShow" :options="optionZFJCsxnsyyzdq_fxc" />
        </page-header>
      </div>
    </div>

    <!-- 高 20px -->
    <div style="height:1.5%" />

    <div class="flex justify-between" style="height:68%;flex-wrap: wrap;">
      <div data-bottom class="second-sides" style="height: 45%;">
        <page-header text="世界羊奶价格对比分析">
          <!-- <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" /> -->
          <v-chart v-if="optionZFJCsjynjgdbfx_fxc.isShow" ref="zscpjzlzr" :options="optionZFJCsjynjgdbfx_fxc" :deepWatchOption = 'true'/>
        </page-header>
      </div>
      <div data-bottom class="second-sides" style="height: 45%;">
        <page-header text="全国主要省份羊奶价格对比分析">
          <!-- <v-chart v-if="optionCyrkqk.isShow" ref="nypx" :options="optionCyrkqk" /> -->
          <v-chart v-if="optionZFJCqgnsyjgdbfx_fxc.isShow" ref="nypx" :options="optionZFJCqgnsyjgdbfx_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides" style="height: 94%; background: url();border: 2px solid;
        border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;"
      >
        <page-header text="陕西省羊乳加工企业销售额TOP10" :ph="300">
          <v-chart v-if="optionZFJCsxsjgqyTOP10_fxc.isShow" :options="optionZFJCsxsjgqyTOP10_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides" style="height: 46.5%; position: relative; top: -46.5%;">
        <page-header :ph="270" text="全球奶山羊平均单产量水平比较分析">
          <!-- <v-chart v-if="optionJscgjzlzrje.isShow" ref="zscpjzlzr" :options="optionJscgjzlzrje" /> -->
          <v-chart v-if="optionZFJCqqnsydclspfx_fxc.isShow" ref="zscpjzlzr" :options="optionZFJCqqnsydclspfx_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides" style="height: 46.5%; position: relative; top: -46.5%;left: -33.7%;">
        <page-header :ph="270" text="陇县羊奶供需水平分析">
          <!-- <v-chart v-if="optionJscgjzlzrje.isShow" ref="zscpjzlzr" :options="optionJscgjzlzrje" /> -->
          <v-chart v-if="optionZFJClxyngxspfx_fxc.isShow" ref="zscpjzlzr" :options="optionZFJClxyngxspfx_fxc" />
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <!-- <div style="height:2%" /> -->

    <!-- 高 607px -->
    <!-- <div class="flex justify-between" style="height:32%">
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="奶山羊料奶比">
          <v-chart v-if="optionNSYlnb_fxc.isShow" ref="zscpjzlzr" :options="optionNSYlnb_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="奶山羊产羔率">
          <v-chart v-if="optionNSYcgl_fxc.isShow" :options="optionNSYcgl_fxc" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="奶山羊羔羊成活率" :ph="300">
          <v-chart :is-show="optionNSYgychl_fxc.isShow" :options="optionNSYgychl_fxc" />
        </page-header>
      </div>
    </div> -->
    <router-link class="particulars" :to="{path: 'details'}" />
  </div>
</template>

<script>
  import { getTowSideStat, hotWords  , getEchartsDataS , getEchartsData } from '@/api/connector'
  import { getDataAndRefresh } from '@/utils/echartsRefresh'
  import Particulars from 'header/particulars.vue'
  import echarts from 'echarts'
  import { getHandle } from '@/api'
  import { formatNumber } from '@/utils/app'
  import PageHeader from 'header/PageHeader.vue'
  import 'echarts-wordcloud'
  import YlTable from 'header/yltable'
  const tooltip = function (a, b) {
    return {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
      formatter: function (params, ticket, callback) {
        var htmlStr = ''
        for (var i = 0; i < params.length; i++) {
          var param = params[i]
          var xName = param.name // x轴的名称
          var seriesName = param.seriesName // 图例名称
          var value = param.value[i + 1] // y轴值
          var color = param.color // 图例颜色
          if (i === 0) {
            htmlStr += xName + '<br/>' // x轴的名称
          }
          htmlStr += '<div>'
          htmlStr +=
            '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
          htmlStr += seriesName + '：奶山羊企业投入产出比 ' + value + (i === 0 ? a : b) // 圆点后面显示的文本
          htmlStr += '</div>'
        }
        return htmlStr
      }
    }
  }
  export default {
    name: 'AgriculturalTechnology',
    components: { PageHeader, Particulars },
    data() {
      return {
        // spkart 世界奶山羊主要养殖地区数据分析 配置项
        optionZFJCsjnsyyzdq_fxc: {
          width: '82%',
          isShow: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '8%',
            bottom: "12%"
          },
          legend: {
            show: true,
            top: 0,
            right: 20,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '万只',
              nameTextStyle: {
                color: '#fff'
              },
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
            {
              type: 'value',
              name: '万吨',
              nameTextStyle: {
                color: '#fff'
              },
              // splitNumber: 4,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              // splitLine: {
              //   show: true,
              //   lineStyle: {
              //     color: '#5C6D7C'
              //   }
              // },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
          ],
          series: [
            {
              name: '存栏量',
              type: 'bar',
              barWidth: 10,
              data: [
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#00DCFF' },
                    { offset: 1, color: 'rgba(0, 182, 255, 0)' }
                  ]
                )
              }
            },
            {
              name: '产奶量',
              type: 'bar',
              barWidth: 10,
              yAxisIndex: 1,
              data: [
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#9C52FF' },
                    { offset: 1, color: 'rgba(156, 82, 255, 0)' }
                  ]
                )
              }
            },
          ]
        },
        // spkart 全国奶山羊主要养殖地区数据分析  配置项
        optionZFJCqgnsyyzdq_fxc: {
          width: '82%',
          isShow: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '8%',
            bottom: "12%"
          },
          legend: {
            show: true,
            top: 0,
            right: 20,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '万只', 
              nameTextStyle: {
                color: '#fff'
              },
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
            {
              type: 'value',
              name: '万吨',
              nameTextStyle: {
                color: '#fff'
              },
              splitNumber: 4,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              // splitLine: {
              //   show: true,
              //   lineStyle: {
              //     color: '#5C6D7C'
              //   }
              // },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
          ],
          series: [
            {
              name: '存栏量',
              type: 'bar',
              barWidth: 10,
              data: [
                
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#00DCFF' },
                    { offset: 1, color: 'rgba(0, 182, 255, 0)' }
                  ]
                )
              }
            },
            {
              name: '产奶量',
              type: 'bar',
              barWidth: 10,
              yAxisIndex: 1,
              data: [
                
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#9C52FF' },
                    { offset: 1, color: 'rgba(156, 82, 255, 0)' }
                  ]
                )
              }
            },
          ]
        },
        // spkart 陕陕西省奶山羊主要养殖地区数据分析  配置项
        optionZFJCsxnsyyzdq_fxc: {
          width: '80%',
          isShow: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            left: '9%',
            bottom: "12%"
          },
          legend: {
            show: true,
            top: 0,
            right: 20,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '万只',
              nameTextStyle: {
                color: '#fff'
              },
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
            {
              type: 'value',
              name: '万吨',
              nameTextStyle: {
                color: '#fff'
              },
              splitNumber: 4,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              // splitLine: {
              //   show: true,
              //   lineStyle: {
              //     color: '#5C6D7C'
              //   }
              // },
              axisLabel: {
                color: '#E9F7FF',
                // fontWeight: 'bold',
                fontSize: 13
              }
            },
          ],
          series: [
            {
              name: '存栏量',
              type: 'bar',
              barWidth: 10,
              data: [
                
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#00DCFF' },
                    { offset: 1, color: 'rgba(0, 182, 255, 0)' }
                  ]
                )
              }
            },
            {
              name: '产奶量',
              type: 'bar',
              barWidth: 10,
              yAxisIndex: 1,
              data: [
                
              ],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#9C52FF' },
                    { offset: 1, color: 'rgba(156, 82, 255, 0)' }
                  ]
                )
              }
            },
          ]
        },
        // spkart 世界羊奶价格对比分析
        optionZFJCsjynjgdbfx_fxc: {
          isShow: true,
          tooltip:{},
          radar: {
            center: ['50%', '60%'],
            // 标签配置
            name: {
              color: '#E9F7FF',
              fontWeight: 500,
              lineHeight: 20,
              fontSize: 14,
              padding: [5, 12],
              backgroundColor: 'rgba(21, 83, 121, .5)'
            },
            nameGap: 10,
            radius: '65%',
            // 坐标轴配置
            axisLine: {
              show: true
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#18364E', '#38556B', '#18364E', '#38556B', 'transparent']
              }
            },
            // shape: 'circle',
            indicator: [
            ]
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: [],
                  name: '世界羊奶价格对比分析:'
                }
              ],
              lineStyle: {
                color: '#18D8B1'
              },
              areaStyle: {
                color: '#18D8B1',
                opacity: 0.08
              }
            }
          ]
        },
        // spkart 全国主要羊奶价格对比分析
        optionZFJCqgnsyjgdbfx_fxc: {
          width: "90%",
          isShow: true,
          legend: {
            data: ['陕西', '山东', '云南'],
            top: 0,
            right: 0,
            itemWidth: 14,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '元/kg',
              nameTextStyle: {
                color: '#fff'
              },
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
            },

            {
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#5C6D7C'
                }
              },
            }
          ],
          series: [
            {
              name: '陕西',
              type: 'line',
              data: [],
              smooth: false,
              symbol: 'emptyCircle',
              symbolSize: [8, 8]
            },
            {
              name: '山东',
              type: 'line',
              data: [],
              smooth: false,
              symbol: 'emptyCircle',
              symbolSize: [8, 8]
            },
            {
              name: '云南',
              type: 'line',
              data: [],
              smooth: false,
              symbol: 'emptyCircle',
              symbolSize: [8, 8]
            },
          ]
        },
        // spkart 陕西省羊乳加工企业销售额TOP10
        optionZFJCsxsjgqyTOP10_fxc: {
          isShow: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter:  (params) => {
              var htmlStr = ''
              for (var i = 0; i < params.length; i++) {
                var param = params[i]
                var yName = param.name // y轴的名称
                // var seriesName = param.seriesName // 图例名称
                var value = param.value// x轴值
                var color = param.color // 图例颜色
                // if (i === 0) {
                //   htmlStr += yName + '<br/>' // x轴的名称
                // }
                htmlStr += '<div style="padding: 10px 20px">'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
                htmlStr += yName + '<br/>' + '销售额: ' + value + '亿元' + '<br/>' + '主产品: ' + this.top10Data[param.dataIndex]  // 圆点后面显示的文本
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          grid: {
            top: "5%",
            left: '2%',
            right: '10%',
            bottom: "1%",
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '亿元',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: [],
            axisLine: {
              show: false
            },
            axisLabel: {
              fontSize: 13,
              fontWeight: 600,
              color: '#E9F7FF'
            }
          },
          series: [
            {
              type: 'bar',
              data: [],
              barWidth: 12,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        },
        // spkart 全球奶山羊平均单产量水平比较分析
        optionZFJCqqnsydclspfx_fxc: {
           isShow: true,
           tooltip:{},
          radar: {
            center: ['50%', '55%'],
            // 标签配置
            name: {
              color: '#E9F7FF',
              fontWeight: 500,
              lineHeight: 20,
              fontSize: 14,
              padding: [5, 12],
              backgroundColor: 'rgba(21, 83, 121, .5)'
            },
            nameGap: 10,
            radius: '56%',
            // 坐标轴配置
            axisLine: {
              show: true
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#18364E', '#38556B', '#18364E', '#38556B', 'transparent']
              }
            },
            // shape: 'circle',
            indicator: [
            ]
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: [],
                  name: '全球奶山羊平均单产量水平比较分析:'
                }
              ],
              lineStyle: {
                color: '#3CB5FF'
              },
              areaStyle: {
                color: '#3CB5FF',
                opacity: 0.08
              }
            }
          ]
        },
        // spkart 陇县羊奶供需水平分析 差额柱状图 配置项
        optionZFJClxyngxspfx_fxc: {
          isShow: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params, ticket, callback) {
              var htmlStr = ''
              for (var i = 0; i < params.length; i++) {
                var param = params[i]
                var yName = param.name // y轴的名称
                var seriesName = param.seriesName // 图例名称
                var value = param.data < 0 ? -param.data : param.data// y轴值
                var color = param.color // 图例颜色
                if (i === 0) {
                  htmlStr += yName + '<br/>' // x轴的名称
                }
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
                htmlStr += seriesName + ': ' + (+value).toFixed(2) + '吨'// 圆点后面显示的文本
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          legend: {
            data: ['产奶量', '加工需求量', '差额'],
            right: 0,
            top: 0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              name: "吨",
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              data: []
            }
          ],
          series: [
            {
              name: '加工需求量',
              type: 'bar',
              stack: 'Total',
              label: {
                show: false
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              data: []
            },
            {
              name: '产奶量',
              type: 'bar',
              stack: 'Total',
              label: {
                show: false,
                position: 'left'
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              data: []
            },
             {
              name: '差额',
              type: 'bar',
              label: {
                show: false,
                position: 'inside'
              },
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              data: []
            },
          ]
        },
       
        optionCyrkqk: {
          isShow: false,
          tooltip: tooltip('场次', '人次'),
          legend: {
            textStyle: {
              color: '#fff'
            },
            data: ['可用余额', '不可用余额', '收入', '支出']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
            data: []
          },
          yAxis: [
            {
              name: '场次',
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              },
              splitLine: {
                // 分割线配置
                lineStyle: {
                  color: '#ffffff'
                }
              }
            },
            {
              name: '人次',
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              },
              splitLine: {
                // 分割线配置
                lineStyle: {
                  color: '#ffffff'
                }
              }
            }
          ],
          series: []
        },
        optionZjfuqk: {
          isShow: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
            formatter: function (params, ticket, callback) {
              var htmlStr = ''
              for (var i = 0; i < params.length; i++) {
                var param = params[i]
                var xName = param.name // x轴的名称
                var seriesName = param.seriesName // 图例名称
                var value = param.value // y轴值
                var color = param.color // 图例颜色
                if (i === 0) {
                  htmlStr += xName + '<br/>' // x轴的名称
                }
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
                htmlStr += seriesName + '：' + formatNumber(value) + '次' // 圆点后面显示的文本
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              name: '次',
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              },
            }
          ],
          series: [
            {
              name: '邮件营销',
              type: 'line',
              areaStyle: {},
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              areaStyle: {},
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              areaStyle: {},
              data: [150, 232, 201, 154, 190, 330, 410]
            }
          ]
        },
        hotWordsList: {
          isShow: false,
          tooltip: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 30
            }
          },
          series: [
            {
              type: 'wordCloud',
              // 网格大小，各项之间间距
              gridSize: 30,
              // 形状 circle 圆，cardioid  心， diamond 菱形，
              // triangle-forward 、triangle 三角，star五角星
              shape: 'line',
              // 字体大小范围
              sizeRange: [14, 60],
              // 文字旋转角度范围
              rotationRange: [0, 0],
              // 旋转步值
              rotationStep: 0,
              // 自定义图形
              // maskImage: maskImage,
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              // 画布宽
              width: '90%',
              // 画布高
              height: '100%',
              // 是否渲染超出画布的文字
              drawOutOfBound: false,
              textStyle: {
                normal: {
                  color: function () {
                    return (
                      'rgb(' +
                      [Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55)].join(',') +
                      ')'
                    )
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: '#2ac'
                }
              },
              data: []
            }
          ]
        },
        optionZZFBXX: {
          isShow: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b}<br>{a}:{c}个'
          },
          legend: {
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'line'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          yAxis: {
            type: 'value',
            name: '个',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              areaStyle: {},
              data: []
            }

          ]
          // isShow: false,
          // title: {
          //   //   text: '农产品劳动力需求分析'
          // },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'shadow'
          //   },
          //   // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          //   formatter: function(params, ticket, callback) {
          //     var htmlStr = ''
          //     for (var i = 0; i < params.length; i++) {
          //       var param = params[i]
          //       var xName = param.name // x轴的名称
          //       var seriesName = param.seriesName // 图例名称
          //       var value = param.value // y轴值
          //       var color = param.color // 图例颜色
          //       if (i === 0) {
          //         htmlStr += xName + '<br/>' // x轴的名称
          //       }
          //       htmlStr += '<div>'
          //       htmlStr +=
          //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
          //       htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
          //       htmlStr += '</div>'
          //     }
          //     return htmlStr
          //   }
          // },
          // legend: {},
          // grid: {
          //   left: '3%',
          //   right: '4%',
          //   bottom: '3%',
          //   containLabel: true
          // },
          // toolbox: {},
          // xAxis: {
          //   type: 'category',
          //   boundaryGap: false, // 坐标轴两边留白
          //   data: [],
          //   axisTick: {
          //     // 坐标轴刻度相关设置。
          //     show: false
          //   },
          //   splitLine: {
          //     // 坐标轴在 grid 区域中的分隔线。
          //     show: false,
          //     lineStyle: {
          //       color: '#E5E9ED'
          //       // 	opacity:0.1
          //     }
          //   }
          // },
          // yAxis: [
          //   {
          //     type: 'value',
          //     name: '个',
          //     splitNumber: 5
          //   }
          // ],
          // series: [
          //   {
          //     name: '',
          //     type: 'line',
          //     smooth: true,
          //     itemStyle: {
          //       normal: {
          //         color: '#3A84FF',
          //         lineStyle: {
          //           color: '#3A84FF',
          //           width: 1
          //         },
          //         areaStyle: {
          //           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //             {
          //               offset: 0,
          //               color: 'rgba(58,132,255,0)'
          //             },
          //             {
          //               offset: 1,
          //               color: 'rgba(58,132,255,0.35)'
          //             }
          //           ])
          //         }
          //       }
          //     },
          //     data: []
          //   }
          // ]
        },
        optionJscgjzlzrje: {
          isShow: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b}<br>{a}:{c}亿元'
          },
          legend: {
            data: ['蒸发量', '降水量', '平均温度']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'line'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          yAxis: {
            type: 'value',
            name: '亿元',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          series: []
        },
        optionZscpzlzr: {
          isShow: false,
          tooltip: tooltip('个', '个'),
          legend: {
            data: ['蒸发量', '降水量', '平均温度']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '16%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          yAxis: {
            type: 'value',
            name: '个',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          },
          series: []
        },
        table: {
          url: '/cybd/api/agri/agriTechPrize/queryList',
          columns: [
            {
              prop: 'firstAchieveUnit',
              label: '第一完成单位'
            },
            {
              prop: 'achieveMen',
              label: '完成人'
            }
          ]
        },
        table_2: {
          url: '/cybd/api/agri/policy/queryList',
          columns: [
            {
              prop: 'policyName',
              label: '政策名称'
            },
            {
              prop: 'publishUnit',
              label: '发布机构'
            },
            {
              prop: 'source',
              label: '来源'
            }
          ]
        },
        timer1: null,
        timer2: null,
        timer3: null,
        // timer4: null,
        timer5: null,
        timer6: null,
        // timer7: null,
        timer8: null,
        top10Data:[]
      }
    },
    created() {
      // 请求数据
      this.timer1 = getDataAndRefresh(this.getEchartsData01)
      this.timer2 = getDataAndRefresh(this.getEchartsData02)
      this.timer3 = getDataAndRefresh(this.getEchartsData03)
      // this.timer4 = getDataAndRefresh(this.getEchartsData04)
      this.getEchartsData04()
      this.timer5 = getDataAndRefresh(this.getEchartsData05)
      this.timer6 = getDataAndRefresh(this.getEchartsData06)
      // this.timer4 = getDataAndRefresh(this.getEchartsData07)
      this.getEchartsData07()
      this.timer8 = getDataAndRefresh(this.getEchartsData08)
      // this.init()
    },
    destroyed() {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
      clearInterval(this.timer3)
      clearInterval(this.timer5)
      clearInterval(this.timer6)
      clearInterval(this.timer8)
      // clearInterval(this.timer4)
      // clearInterval(this.timer7)
    },
    methods: {
      // spkart 世界奶山羊主要养殖地区数据分析
      getEchartsData01() {
        this.optionZFJCsjnsyyzdq_fxc.xAxis[0].data = []
        this.optionZFJCsjnsyyzdq_fxc.series[0].data = []
        this.optionZFJCsjnsyyzdq_fxc.series[1].data = []
        getEchartsDataS('MAJOR_BREEDING_BASES_IN_THE_WORLD').then(res => {
          this.formatData01(res.data.rows)
        }).catch(err => { 
          console.log(err);
        })
      },
      formatData01(rows) {
        var xData = []
        var yData01 = []
        var yData02 = []
        rows.pop()
        rows.forEach(item => {
          xData.push(item.name)
          yData01.push(item.c_1)
          yData02.push(item.c_2)
        })
        this.optionZFJCsjnsyyzdq_fxc.xAxis[0].data = xData
        this.optionZFJCsjnsyyzdq_fxc.series[0].data = yData01
        this.optionZFJCsjnsyyzdq_fxc.series[1].data = yData02
      },
      // spkart 全国奶山羊主要养殖地区数据分析
      getEchartsData02() {
        this.optionZFJCqgnsyyzdq_fxc.xAxis[0].data = []
        this.optionZFJCqgnsyyzdq_fxc.series[0].data = []
        this.optionZFJCqgnsyyzdq_fxc.series[1].data = []
        getEchartsDataS('MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_CHINA').then(res => {
          this.formatData02(res.data.rows)
        }).catch(err => {
          console.log(err);
        })
      },
      formatData02(rows) {
        var xData = []
        var yData01 = []
        var yData02 = []
        rows.pop()
        rows.forEach(item => {
          xData.push(item.name)
          yData01.push(item.c_1)
          yData02.push(item.c_2)
        })
        this.optionZFJCqgnsyyzdq_fxc.xAxis[0].data = xData
        this.optionZFJCqgnsyyzdq_fxc.series[0].data = yData01
        this.optionZFJCqgnsyyzdq_fxc.series[1].data = yData02
      },
      // spkart 陕西省奶山羊主要养殖地区数据分析
      getEchartsData03() {
        this.optionZFJCsxnsyyzdq_fxc.xAxis[0].data = []
        this.optionZFJCsxnsyyzdq_fxc.series[0].data = []
        this.optionZFJCsxnsyyzdq_fxc.series[1].data = []
        getEchartsDataS('MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_SHAANXI').then(res => {
          this.formatData03(res.data.rows)
        }).catch(err => {
          console.log(err);
        })
      },
      formatData03(rows) {
        var xData = []
        var yData01 = []
        var yData02 = []
        rows.pop()
        rows.forEach(item => {
          xData.push(item.name)
          yData01.push(item.c_1)
          yData02.push(item.c_2)
        })
        this.optionZFJCsxnsyyzdq_fxc.xAxis[0].data = xData
        this.optionZFJCsxnsyyzdq_fxc.series[0].data = yData01
        this.optionZFJCsxnsyyzdq_fxc.series[1].data = yData02
      },
      // spkart 世界羊奶价格对比分析
      getEchartsData04() {
        // this.optionZFJCsjynjgdbfx_fxc.radar.indicator = []
        // this.optionZFJCsjynjgdbfx_fxc.series[0].data[0].value = []
        getEchartsDataS('WORLD_GOAT_MILK_PRICE').then(res => {
          this.formatData04(res.data.rows);
        }).catch(err => {
          console.log(err);
        })
      },
      formatData04(rows) {
        var xData = []
        var yData = []
        rows.forEach(item => {
          xData.push({
            name: item.name,
            max: 6000
          })
          yData.push(item.c_1)
        })
        let max = Math.max(...yData)
        xData.forEach(item => {
          item.max = max
        })
        this.optionZFJCsjynjgdbfx_fxc.radar.indicator = xData
        this.optionZFJCsjynjgdbfx_fxc.series[0].data[0].value = yData
      },
      // spkart 全国主要羊奶价格对比分析
      getEchartsData05() {
        this.optionZFJCqgnsyjgdbfx_fxc.xAxis.data = []
        this.optionZFJCqgnsyjgdbfx_fxc.series[0].data = []
        this.optionZFJCqgnsyjgdbfx_fxc.series[1].data = []
        this.optionZFJCqgnsyjgdbfx_fxc.series[2].data = []
        getEchartsData('DATA_TYPE_GOAT_MILK_PRICES_IN_MAJOR_PROVINCES').then(res => {
          this.formatData05(res.data.rows);
        }).catch(err => {
          console.log(err);
        })
      },
      formatData05(rows) {
        // c1  -   c3  陕西  云南  山东 optionZFJCqgnsyjgdbfx_fxc
        var xData = []
        var yData01 = []
        var yData02 = []
        var yData03 = []
        
        rows.forEach(item => {
          xData.push(item.dataDateStr)
          yData01.push(item.c_1)  // 陕西
          yData02.push(item.c_2)  // 云南
          yData03.push(item.c_3)  // 山东
        })
        this.optionZFJCqgnsyjgdbfx_fxc.xAxis.data = xData.reverse()
        this.optionZFJCqgnsyjgdbfx_fxc.series[0].data = yData01.reverse()
        this.optionZFJCqgnsyjgdbfx_fxc.series[1].data = yData03.reverse()
        this.optionZFJCqgnsyjgdbfx_fxc.series[2].data = yData02.reverse()
      },
      // spkart 陕西省羊乳加工企业销售额TOP10
      getEchartsData06() {
        this.optionZFJCsxsjgqyTOP10_fxc.yAxis.data = []
        this.optionZFJCsxsjgqyTOP10_fxc.series[0].data = []
        getEchartsDataS('SALES_OF_SHEEP_MILK_PROCESSING_IN_SHAANXI').then(res => {
          this.formatData06(res.data.rows);
          console.log(res.data.rows);
          // console.log(res);
        }).catch(err => {
          console.log(err);
        })
      },
      formatData06(rows) {
        // c1  -   c3  陕西  云南  山东 optionZFJCqgnsyjgdbfx_fxc
        var xData = []
        var yData = []
        console.log(rows);

        rows.forEach(item => {
          xData.push(item.c_1)
          yData.push(item.name)
          this.top10Data.push(item.c_21)
        })
        this.top10Data.reverse()
        this.optionZFJCsxsjgqyTOP10_fxc.yAxis.data = yData.reverse()
        this.optionZFJCsxsjgqyTOP10_fxc.series[0].data = xData.reverse()
      },
      // spkart 全球奶山羊平均单产量水平比较分析
      getEchartsData07() {
        getEchartsDataS('GLOBAL_AVERAGE_PER_UNIT_YIELD_OF_DAIRY_GOATS').then(res => {
          this.formatData07(res.data.rows);
        }).catch(err => {
          console.log(err);
        })
      },
      formatData07(rows) {
        var xData = []
        var yData = []
        rows.forEach(item => {
          xData.push({
            name: item.name,
            max: 12000000
          })
          yData.push(item.c_1)
        })
        let max = Math.max(...yData)
        xData.forEach(item => {
          item.max = max
        })
        // yData的最大值设置为xData中所有的max
        this.optionZFJCqqnsydclspfx_fxc.radar.indicator = xData
        this.optionZFJCqqnsydclspfx_fxc.series[0].data[0].value = yData
      },
      // spkart 陇县羊奶供需水平分析
      getEchartsData08() {
        this.optionZFJClxyngxspfx_fxc.yAxis[0].data = []
        this.optionZFJClxyngxspfx_fxc.series[1].data = []
        this.optionZFJClxyngxspfx_fxc.series[0].data = []
        this.optionZFJClxyngxspfx_fxc.series[2].data = []
        getEchartsData('DATA_TYPE_MILK_LONGXIAN_FRESH_MILK_SUPPLY_AND_DEMAND').then(res => {
          this.formatData08(res.data.rows);
          // console.log(res);
        }).catch(err => {
          console.log(err);
        })
      },
      formatData08(rows) {
        // c1  产奶量   c2  加工需求量    y轴日期月份
        var xData01 = []
        var xData02 = []
        var xData03 = []
        var yData = []
        rows.forEach(item => {
          yData.push(item.dataDateStr)   // 日期月份
          xData01.push(item.c_1)          //  产奶量
          xData02.push(item.c_2)          //  需求量
        })
        for(let i = 0; i < xData01.length; i++) {
          xData03.push(((xData01[i].toFixed(2) * 100 - xData02[i].toFixed(2) * 100) / 100).toFixed(2))
          // xData03.push(((1111.11.toFixed(2) * 100 - 111.11.toFixed(2) * 100) / 100).toFixed(2))
        }
        this.optionZFJClxyngxspfx_fxc.yAxis[0].data = yData.reverse()
        this.optionZFJClxyngxspfx_fxc.series[1].data = xData01.reverse()
        this.optionZFJClxyngxspfx_fxc.series[0].data = xData02.map(item => -item).reverse()
        this.optionZFJClxyngxspfx_fxc.series[2].data = xData03.reverse()
        console.log(1111);
      },
      


      toFour(name, isCodew, typeCode) {
        if (name === isCodew) {
          this.$router.push({ name: 'Fourstage', query: { code: '000204', name: this.$route.matched[0].name, typeCode: typeCode || isCodew } })
        }
      },
      init() {
        getTowSideStat({ groupCode: 'NYPX' }).then((data) => {
          const val = data.body
          // console.log('val', val)
          const optionCyrkqk = this.optionCyrkqk
          optionCyrkqk.xAxis.data = val.dateSet
          optionCyrkqk.legend.data = val.typeSet
          const arr = Object.keys(val.typeValueListMap)
          arr.forEach((item, index) => {
            optionCyrkqk.series.push({
              name: item,
              type: 'bar',
              data: val.typeValueListMap[item],
              yAxisIndex: index
            })
          })
          optionCyrkqk.isShow = true
          this.toLink(this, 'nypx', (p) => {
            this.toFour(p.seriesName, '参培人数', '农业培训人数')
            this.toFour(p.seriesName, '培训次数', '农业培训场次')
          })
        })
        getTowSideStat({ groupCode: 'ZJFWQK' }).then((res) => {
          this.optionZjfuqk.xAxis[0].data = res.body.dateSet
          this.optionZjfuqk.legend.data = res.body.typeSet
          var obj = res.body.typeValueListMap
          var key = []
          var value = []
          for (var i in obj) {
            key.push(i)
            value.push(obj[i])
          }
          this.optionZjfuqk.series[0].data = value[0]
          this.optionZjfuqk.series[0].name = key[0]
          this.optionZjfuqk.series[1].data = value[1]
          this.optionZjfuqk.series[1].name = key[1]
          this.optionZjfuqk.series[2].data = value[2]
          this.optionZjfuqk.series[2].name = key[2]
          this.optionZjfuqk.isShow = true
        })
        hotWords({ type: 'NYTP' }).then((res) => {
          this.hotWordsList.series[0].data = res.body.data.map((item, index) => {
            return {
              name: item.name,
              value: item.number
            }
          })
          this.hotWordsList.isShow = true
        })

        // 农业政策
        getTowSideStat({ groupCode: 'ZZFBXX' }).then((res) => {
          const val = res.body
          this.optionZZFBXX.xAxis.data = val.dateSet
          this.optionZZFBXX.series[0].name = '政策发布数量'
          this.optionZZFBXX.series[0].data = val.typeValueListMap['政策发布数量']
          this.optionZZFBXX.isShow = true
        })
        getTowSideStat({ groupCode: 'ZSCPJZLZR' }).then((data) => {
          const val = data.body
          const option = this.optionZscpzlzr
          const optionJscgjzlzrje = this.optionJscgjzlzrje
          optionJscgjzlzrje.xAxis.data = option.xAxis.data = val.dateSet
          optionJscgjzlzrje.legend.data = option.legend.data = val.typeSet
          Object.keys(val.typeValueListMap).forEach((item, index) => {
            if (item.indexOf('金额') === -1) {
              option.series.push({
                name: item,
                type: 'bar',
                data: val.typeValueListMap[item]
              })
            } else {
              optionJscgjzlzrje.series.push({
                name: item,
                type: 'line',
                areaStyle: {},
                data: val.typeValueListMap[item]
              })
            }
          })
          option.isShow = true
          optionJscgjzlzrje.isShow = true
          this.toLink(this, 'zscpjzlzr', (p) => {
            console.log(p)
            this.toFour(p.seriesName, '涉农技术专利转让数量', '品种种植涉农专利转让数')
            this.toFour(p.seriesName, '涉农科技成果转让数量', '农业科技成果转让数')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .second-center {
    width: 47.87%;
    height: 100%;
    background-size: 100% 100% !important;
  }

  .second-sides {
    width: 32.7%;
    height: 100%;
    background-size: 100% 100% !important;
  }

  .second-center[data-top] {
    background: url(~@/assets/img/gradients-right.png) no-repeat;
  }

  .second-center[data-bottom] {
    background: url(~@/assets/img/gradients-right.png) no-repeat;
  }

  .second-sides[data-top] {
    background: url(~@/assets/img/gradients-right.png) no-repeat;
  }

  .second-sides[data-bottom] {
    background: url(~@/assets/img/gradients-right.png) no-repeat;
  }

  .el-table {
    background-color: transparent !important;
  }
.particulars {
  width: 28px;
  height: 28px;
  position: fixed;
  right: 35px;
  top: 8.5%;
  z-index: 999;
  background-size: 100% 100% !important;
  background: url(~@/assets/img/sijiicon.png) no-repeat;
}
</style>